<template>
    <div class="currency-rate">
        <span v-for="item in labelList" :key="item.name" :name="item.name" v-text="item.value"></span>
    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "CurrencyRate",
    props: {
        // 内容覆盖， 用于订单等货币固定为usd的场景
        cover: { type: Object, default: () => ({}) },
        // 价格，美分
        price: { type: [String, Number], default: 0 },
        // 显示类型 <unit><price><icon>
        type: { type: String, default: '' },
        // 其他内容
        other: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            priceSplit: /-+/,
        };
    },

    computed: {
        ...mapState({
            currency: 'currency',
            rate: 'rate',
        }),

        // 真实的数据，考虑到变量被覆盖的场景
        realValue () {
            if (this.cover) {
                return {
                    currency: this.cover.currency || this.currency,
                    rate: this.cover.rate || this.rate,
                }
            } else {
                return {
                    currency: this.currency,
                    rate: this.rate,
                }
            }
        },

        // 显示列表
        labelList () {
            const result = [];
            // 默认情况
            const type = !this.type ? 'unit|price' : this.type;

            type.split('|').map(str => {

                if (!str) {
                    // 没有内容
                } else if (str == 'unit') {
                    result.push({ name: str, value: this.realValue.currency });
                } else if (str == 'icon') {
                    const icon = {
                        'USD': '$',
                        'AUD': '$',
                        'GBP': '£',
                        'EUR': '€',
                        'CAD': '$',
                        'HKD': '$',
                        'JPY': '¥',
                        'CHF': 'Fr',
                        'NZD': '$',
                    }
                    result.push({ name: str, value: icon[this.realValue.currency] || '$' });
                } else if (str == 'price') {
                    result.push({ name: str, value: this.getRatePrice() });
                } else if (this.other[str]) {
                    result.push({ name: str, value: this.other[str] });
                }

            });
            return result;
        },


    },
    methods: {
        mathRound (value, n = 2) {
            n = n === undefined ? 1 : n;
            let bei = Math.pow(10, n);
            let res = Math.round(value * bei) / bei;
            return +parseFloat(res.toPrecision(12));
        },

        // 价格
        getPrice (price) {
            return this.mathRound(0.01 * price * this.realValue.rate).toFixed(2);
        },

        getRatePrice () {
            const price = this.price

            if (typeof price === 'string' && this.priceSplit.test(price)) {
                // 显示价格区间
                return price.replace(/[\d\.]+/g, i => this.getPrice(i, false))
            } else {
                return this.getPrice(price, false);
            }

        }


    },
};
</script>
<style lang="scss" scoped>
.currency-rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    span {
        vertical-align: top;
        white-space: nowrap;

        &[name='icon'] {
            font-family: 'Arial';
        }

        &+span {
            margin-left: 4px;
        }
    }
}
</style>
